<template>
    <div class="madp-customer-list">
        <basic-container v-if="!detailShow">
            <el-form :inline="true" :model="searchForm" ref="searchForm" class="madp-search-form" label-width="100px">
                <div :class="[!showMoreSearch ? 'not-show-more madp-search-left' : 'madp-search-left']">
                    <div class="show-more-wrap">
                        <el-form-item label="关键词:">
                            <el-input v-model.trim="searchForm.keyWords" placeholder="客户姓名/昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="客户性别:">
                            <el-select v-model="searchForm.gender">
                                <el-option v-for="(item, index) in genderList" :key="index" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户来源:" class="madp-customer-source">
                            <el-select v-model="searchForm.addWay" placeholder="请选择">
                                <el-option v-for="(item, index) in customersSourceList" :key="index" :label="item.addWayText" :value="item.addWay"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户持群数:">
                            <el-select v-model="searchForm.groupNum" placeholder="请选择">
                                <el-option v-for="(item, index) in holdingGroupList" :key="index" :label="item.label" :value="item.groupNum"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属成员:">
                            <el-select v-model="searchForm.employeeId" placeholder="请选择" filterable>
                                <el-option v-for="item in employeeList" :key="item.employeeId" :label="item.name" :value="item.employeeId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="添加时间:">
                            <el-date-picker
                                v-model="searchForm.timerange"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="{
                                    disabledDate(time) {
                                        return time.getTime() > Date.now();
                                    }
                                }"
                            ></el-date-picker>
                        </el-form-item>
                    </div>
                </div>
                <div class="madp-search-right">
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button plain @click="reset">清空</el-button>
                    </el-form-item>
                </div>
            </el-form>
            <div class="madp-async-time">
                <el-button type="primary" @click="handleRefresh">同步客户</el-button>
                <div v-if="asyncTime">最后一次同步时间:{{ asyncTime }}</div>
            </div>
            <div class="madp-table-wrapper">
                <el-table
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                    :data="tableData"
                    v-loading="loading"
                >
                    <el-table-column type="index" label="序号" width="70px">
                        <template slot-scope="scope">
                            <span v-text="getIndex(scope.$index)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="customerInfo" label="客户信息" width="300px">
                        <template slot-scope="scope">
                            <div class="news">
                                <img :src="scope.row.avatar" :onerror="`src='/img/${scope.row.gender === 1 ? 'male' : 'female'}.png'`" alt />
                                <div class="name madp-custom-name">
                                    <div class="madp-custom-name-top">
                                        <div class="madp-custom-name-text">{{ scope.row.name }}</div>
                                        <i v-if="scope.row.gender === 1" class="el-icon-male" />
                                        <i v-if="scope.row.gender === 2" class="el-icon-female" />
                                    </div>
                                    <div class="madp-custom-name-text">{{ scope.row.remark }}</div>
                                </div>
                                <div :class="scope.row.type == 1 ? 'weixin' : 'other'">@{{ scope.row.typeText }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="businessNo" label="客户号" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.businessNo !== ''">
                                {{ scope.row.businessNo }}
                            </span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addWayText" label="来源" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.addWayText !== ''">
                                {{ scope.row.addWayText }}
                            </span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="employeeName" label="归属成员" align="center"></el-table-column>
                    <el-table-column prop="tag" label="标签" align="center">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" width="200" trigger="hover" v-if="scope.row.tag && scope.row.tag.length > 0">
                                <div>
                                    <el-tag type="primary" v-for="(item, index) in scope.row.tag" :key="index">{{ item }}</el-tag>
                                </div>
                                <div slot="reference">
                                    <el-tag type="primary" v-for="(item, index) in scope.row.tag ? scope.row.tag.slice(0, 2) : []" :key="index">{{ item }}</el-tag>
                                    <el-tag type="primary" v-if="scope.row.tag && scope.row.tag.length > 2">...</el-tag>
                                </div>
                            </el-popover>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="添加时间" align="center">
                        <template slot-scope="scope">
                            <div class>
                                {{ scope.row.createTime.slice(0, 10) }}
                                <br />
                                {{ scope.row.createTime.slice(11) }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width align="center">
                        <template slot-scope="scope">
                            <el-button @click="showDetail(scope.row)" type="text">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="madp-table-page">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.current"
                        :page-sizes="[10, 20, 30, 50, 100]"
                        :page-size="page.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total"
                    ></el-pagination>
                </div>
            </div>
        </basic-container>
        <customer-detail v-else :detailMsg="detailMsg" @goBack="goBack"></customer-detail>
    </div>
</template>

<script>
import { getWorkContactList, synContact, synSource } from '@/api/madp-customer/madp-customer';
import customerDetail from '@/views/customer/customer-list/detail';
import { getDepartmentList } from '@/api/common-interface/department';
export default {
    name: 'customerListMsg',
    components: {
        customerDetail
    },
    data() {
        return {
            // 详情展示开关
            detailShow: false,
            // 详情信息
            detailMsg: {},
            // 成员列表
            employeeList: [],
            // 表格相关数据
            loading: false,
            // 表格数据
            tableData: [],
            // 分页
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // 同步时间
            asyncTime: '',
            // 搜索表单
            searchForm: {
                keyWords: '',
                gender: '',
                addWay: '',
                employeeId: '',
                groupNum: '',
                timerange: '',
                permission: 'ALL'
            },
            // 客户性别
            genderList: [
                {
                    label: '请选择',
                    value: ''
                },
                {
                    label: '未知',
                    value: 0
                },
                {
                    label: '男',
                    value: 1
                },
                {
                    label: '女',
                    value: 2
                }
            ],
            // 持群列表
            holdingGroupList: [
                {
                    label: '请选择',
                    groupNum: ''
                },
                {
                    label: '无群',
                    groupNum: '0'
                },
                {
                    label: '一个',
                    groupNum: '1'
                },
                {
                    label: '多个',
                    groupNum: '2'
                }
            ],
            // 客户来源列表
            customersSourceList: []
        };
    },
    mounted() {
        this.fetchEmployeeList();
        this.getTableData();
        this.getSynSource();
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.size + $index + 1;
        },
        goBack() {
            this.detailShow = false;
            this.getTableData();
        },
        // 成员数据列表
        fetchEmployeeList() {
            getDepartmentList().then((res) => {
                if (res.data && res.data.code === 0) {
                    let data = res.data.data;
                    let { employee } = data;
                    this.employeeList = [{ employeeId: '', name: '请选择' }].concat(employee);
                }
            });
        },
        //获取客户详情
        showDetail(row) {
            this.detailMsg = row;
            this.detailShow = true;
        },
        // 重置
        reset() {
            this.searchForm = {
                keyWords: '',
                gender: '',
                addWay: '',
                employeeId: '',
                startTime: '',
                endTime: '',
                groupNum: '',
                timerange: '',
                permission: 'ALL'
            };
            this.page.current = 1;
            this.page.size = 10;
            this.getTableData();
        },
        // 获取列表
        getTableData() {
            let _this = this;
            _this.loading = true;
            _this.searchForm = Object.assign(_this.searchForm, {
                current: _this.page.current,
                size: _this.page.size
            });
            let params = JSON.parse(JSON.stringify(_this.searchForm));
            for (let key in params) {
                if (params[key] === '') {
                    delete params[key];
                }
            }
            delete params.timerange;
            getWorkContactList(params)
                .then((res) => {
                    if (res.data && res.data.code === 0) {
                        _this.asyncTime = res.data.data.extraProps && res.data.data.extraProps.syncContactTime;
                        _this.tableData = res.data.data.records;
                        _this.page.total = res.data.data.total;
                    }
                    _this.loading = false;
                })
                .catch((err) => {
                    _this.loading = false;
                });
        },
        //查询
        handleSearch() {
            if (this.searchForm.timerange && this.searchForm.timerange.length > 0) {
                this.searchForm.startTime = this.searchForm.timerange[0];
                this.searchForm.endTime = this.searchForm.timerange[1];
            }
            this.page.current = 1;
            this.getTableData();
        },
        //同步
        handleRefresh() {
            this.loading = true;
            synContact()
                .then((res) => {
                    if (res.data.code === 0) {
                        this.asyncTime = new Date().toLocaleString();
                        this.$message({
                            type: 'success',
                            message: '同步成功'
                        });
                        this.getTableData();
                        this.$forceUpdate();
                    }
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        //获取客户来源下拉框
        getSynSource() {
            synSource().then((res) => {
                if (res.data && res.data.code === 0) {
                    this.customersSourceList = [{ addWay: '', addWayText: '请选择' }].concat(res.data.data);
                }
            });
        },
        //分页
        handleSizeChange(size) {
            this.page.size = size;
            this.page.current = 1;
            this.getTableData();
        },
        handleCurrentChange(current) {
            this.page.current = current;
            this.getTableData();
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-customer-list {
    height: 100%;
    /deep/ .el-form.madp-search-form {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    /deep/ .el-form--inline .el-form-item {
        margin: 0 10px 10px;
    }
    /deep/ .el-form.madp-search-form .show-more-wrap .el-input {
        width: 240px;
    }

    /deep/ .show-more-wrap .el-date-editor--daterange.el-input__inner,
    /deep/ .el-form.madp-search-form .show-more-wrap .madp-customer-source .el-input {
        width: 240px;
    }
    .madp-button-group {
        margin-bottom: 20px;
    }
    .madp-search-left {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
    }
    .madp-search-left.not-show-more {
        justify-content: flex-end;
    }
    .madp-search-right {
        width: 240px;
    }
    .madp-async-time {
        margin: 10px;
        display: flex;
        justify-content: space-between;
    }
    .madp-table-page {
        padding: 10px;
        display: flex;
        justify-content: flex-end;
    }
    .news {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
            width: 40px;
            height: 40px;
        }
        .weixin {
            color: #86ce76;
            width: 44px;
        }
        .other {
            color: #f4811f;
            width: 44px;
        }
    }
    .tag-margin {
        margin-right: 20px;
    }

    .el-pagination {
        display: flex;
        justify-content: flex-end;
    }
}
.el-pagination {
    display: flex;
    justify-content: flex-end;
}
.madp-custom-name {
    display: flex;
    flex-direction: column;
    &-top {
        display: flex;
        align-items: center;
    }
    &-text {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/deep/ .el-date-editor .el-range-separator {
    width: 25px !important;
}
.madp-table-wrapper {
    margin-top: 20px;
}
.el-tag {
    margin: 2px;
}
</style>
